<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>预存缴费</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" />
</head>
<body>
<div>
    <!-- 输入的电话号码 -->
    <div>
        <form class="layui-form" action="" style="margin:4% 20%;">
            <div class="layui-form-item">
                <label class="layui-form-label">电话号码:</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" lay-verify="phone" placeholder="" autocomplete="off" class="layui-input"
                           style="display: inline-block;width:70%">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="seek">查找</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 数据表单显示输入的电话号码用户的信息 -->
    <table id="userInformation" lay-filter="test"></table>
</div>
<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['form', 'jquery','table'], function() {
        var table = layui.table,
        form=layui.form,
            layer = layui.layer,
            $ = layui.jquery;
        //自定义验证规则
        form.verify({
            phone:function(value){
                //去除字符串中的所有空格
                var str = value.replace(/\s*/g, "");
                if (str.length == 0) {
                    return '请输入电话号码';
                }
            }
        })
        //监听查找按钮
        form.on('submit(seek)',function(data){
            $.ajax({
                type: 'GET', //提交方式
                url: '', //地址
                data: {
                    phone: data.field.phone
                }, //传输的数据
                dataType: 'json', //传输的数据类型
                success:function(data){
                    if(data=='200'){
                        //加载数据表单
                        table.render({
                            elem: '#userInformation',
                            height: 312,
                            url: '' //数据接口
                            ,
                            page: true //开启分页
                            ,
                            cols: [
                                [ //表头
                                    {
                                      field:'',
                                      title:'id',
                                      width:80
                                    },
                                    {
                                        field: '',
                                        title: '姓名',
                                        width: 80
                                    },
                                    {
                                        field:'',
                                        title:'电话号码',
                                        width:80
                                    },
                                    {
                                      field:'',
                                      title:'预存话费',
                                      width:80
                                    },
                                    {
                                        field:'',
                                        title:'月租',
                                        width:80
                                    },
                                    {
                                      field:'',
                                      title:'身份证号码',
                                      width:80
                                    },
                                    {
                                        field:'',
                                        title:'可用话费',
                                        width:80
                                    }
                                ]
                            ]
                        })
                    }else{
                        layer.msg('没有该电话号码!')
                    }
                },
                error:function(){
                    layer.msg('出错了，请重试!');
                }
            })
        })
        //监听行双击事件（单击事件为：row）
        table.on('rowDouble(userInformation)', function(obj){
            //data是拿到当前行的数据
            var data = obj.data;
            layer.alert(JSON.stringify(data), {
                title: '当前行数据：'
            });
            //示范一个公告层
            layer.open({
                type: 1,
                title: "订单" //不显示标题栏
                ,
                closeBtn: false,
                area: '500px;',
                shade: 0.8,
                id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,
                btnAlign: 'c',
                moveType: 1 //拖拽模式，0或者1
                ,
                content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><form class="layui-form layui-form-pane" action=""><div class="layui-form-item"><label class="layui-form-label" style="background-color: #000000;">真实姓名</label><div class="layui-input-inline" style="width:260px"><input type="text" name="username" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">身份证号码</label><div class="layui-input-block"><input type="text" name="idCard" id="idCard" lay-verify="required" placeholder="请输入身份证号码" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">电话号码</label><div class="layui-input-block"><input type="text" name="phone" lay-verify="required" id="phone" placeholder="请输入电话号码" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">预存缴费</label><div class="layui-input-block"><input type="text" name="prestorage" lay-verify="required" id="prestorage" placeholder="请输入预存缴费" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline" style="width:260px"><label class="layui-form-label" style="background-color: #000000;">月租</label><div class="layui-input-block"><input type="text" name="monthlyrent" lay-verify="required" id="monthlyrent" placeholder="请输入月租" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button><a class="layui-layer-close layui-layer-closetrue layui-btn">取消</a></div></form></div>',
                success: function(layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.layui.com/',
                        target: '_blank'
                    });
                }
            });

        })
    })
</script>
</body>
</html>
